{% extends "admin_base.html" %}
{% block title %}登录{% endblock %}
{% block main %}

    <div class="row">
        {#    <div class="col-xs-6 col-sm-3"></div>#}
        <div class="col-xs-6 col-sm-6" style="float: none;display: block;margin-left: auto;margin-right: auto;">
            {% import "_form.html" as forms %}
            <form method="POST" action="" id='login'>
                {{ forms.render(form) }}

                <div id="embed-captcha"></div>
                <p id="wait">正在加载验证码......</p>
                <p id="notice" class="hide">请先拖动验证码到相应位置</p>
                <br>

                <button type="submit" style="width: 100%" class="btn btn-primary" name="login">登录</button>

            </form>
        </div>
        {#    <div class="col-xs-6 col-sm-3"></div>#}
    </div>
    <script>
        var handlerEmbed = function (captchaObj) {
            $("#embed-submit").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $("#notice")[0].className = "show";
                    setTimeout(function () {
                        $("#notice")[0].className = "hide";
                    }, 2000);
                    e.preventDefault();
                }
            });
            // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
            captchaObj.appendTo("#embed-captcha");
            captchaObj.onReady(function () {
                $("#wait")[0].className = "hide";
            });
            // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
        };
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 使用initGeetest接口
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                    width: '100%',
                    protocol: 'https://'
                }, handlerEmbed);
            }
        });
    </script>
{% endblock %}